import React, { Component } from "react";

/*
  默认情况下，事件的this是指向undefined的

  改变this指向
    1. 内联地添加bind(this)
      不推荐的使用：bind会产生一个新函数，新函数是存在浏览器内存中
      一直使用会导致内存占用过高

    2. 在构造器里面使用this.xxx = this.xxx.bind(this);
      比较推荐，不会使占用过高，用变量接受了新函数
      组件大的时候，相对冗余

    3. 直接改成箭头函数
      箭头函数的this指向外层
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 10,
    };

    // this.fn = this.fn.bind(this);
  }

  // fn() {
  //   console.log(this);
  // }

  fn = () => {
    console.log(this);
  };

  render() {
    return (
      <>
        <h2>事件的this指向</h2>
        {/* <button onClick={this.fn.bind(this)}>btn</button> */}
        <button onClick={this.fn}>btn</button>
      </>
    );
  }
}

export default App;
